// ============================================================================
// Kexio Frontend Global Styles
// - Resets, base, layout skins, component skins (cards/forms/tables/tags)
// - Do not place page-specific styles here
// ============================================================================

// ============================================================================
// 导入所有样式模块
// ============================================================================

// 基础样式层 - 变量、重置、Element-Plus覆盖、工具类
@use './base/variables' as *;
@use './base/reset' as *;
@use './base/element' as *;
@use './base/utilities' as *;

// 组件样式层 - 通用组件样式
@use './components/cards' as *;
@use './components/tables' as *;

// 业务模块样式层 - 功能模块专用样式
@use './modules/auth' as *;
@use './modules/system' as *;
@use './modules/file' as *;

// ------------------------------
// Base & reset (minimal)
// ------------------------------

html, body, #app {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-base);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Text selections
::selection {
  background: var(--color-primary-weak);
}

// ------------------------------
// Layout skins (header/sidebar/content)
// ------------------------------

.app-layout {
  min-height: 100vh;
  background: var(--bg-page);
}

.layout-header {
  height: $header-height;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  box-shadow: var(--shadow-sm);
}

.layout-sidebar {
  width: $sidebar-width; min-width: $sidebar-width;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

// Sidebar elevated like card with light theme
.sidebar-elevated {
  background: var(--sidebar-bg);
  border-right: none;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.layout-content {
  padding: 24px;
  background: var(--bg-page);
}

// ------------------------------
// Light Sidebar Menu Styles - Dark selected only
// ------------------------------

.sidebar-elevated {
  .el-menu {
    background-color: transparent !important;
    border-right: none;
    padding: 8px;

    // 菜单项基础样式
    .el-menu-item {
      color: var(--sidebar-text) !important;
      background-color: transparent !important;
      border-radius: 0 !important;
      margin: 2px 0;
      transition: all 0.2s ease !important;

      &:hover {
        background-color: var(--sidebar-bg-hover) !important;
        color: var(--sidebar-text-hover) !important;
        border-radius: 0 !important;
      }

      // 选中状态 - 深色背景 + 圆角
      &.is-active {
        background-color: var(--sidebar-bg-active) !important;
        color: var(--sidebar-text-active) !important;
        border-radius: var(--sidebar-radius) !important;
        font-weight: 500 !important;
      }

      // 图标样式
      .el-icon {
        width: 20px !important;
        min-width: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: inherit !important;
        margin-right: 12px !important;
        font-size: 16px !important;
      }
    }

    // 子菜单样式
    .el-sub-menu {
      margin: 2px 0;

      .el-sub-menu__title {
        color: var(--sidebar-text) !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        transition: all 0.2s ease !important;

        &:hover {
          background-color: var(--sidebar-bg-hover) !important;
          color: var(--sidebar-text-hover) !important;
          border-radius: 0 !important;
        }

        .el-icon {
          width: 20px !important;
          min-width: 20px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          color: inherit !important;
          margin-right: 12px !important;
          font-size: 16px !important;
        }
      }

      // 子菜单展开时的样式 - 只有选中时才深色
      &.is-opened > .el-sub-menu__title {
        background-color: var(--sidebar-bg-active) !important;
        color: var(--sidebar-text-active) !important;
        border-radius: var(--sidebar-radius) !important;
        font-weight: 500 !important;
      }

      // 子菜单内容区域
      .el-menu {
        padding: 4px 8px;
        background-color: transparent !important;
      }
    }

    // 嵌套菜单项
    .nest-menu {
      .el-menu-item {
        padding-left: 40px !important;
        margin: 1px 0;

        &.is-active {
          background-color: var(--sidebar-bg-active) !important;
          color: var(--sidebar-text-active) !important;
          border-radius: var(--sidebar-radius) !important;
          font-weight: 500 !important;
        }
      }
    }
  }

  // Logo区域样式 - 完全匹配原型设计
  .sidebar-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;                             // 匹配原型 h-16
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);  // 匹配原型 border-b border-border
    padding: 0;

    .sidebar-logo-link {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000000 !important;               // 匹配原型 primary (纯黑色)
      text-decoration: none;
      font-weight: 700 !important;             // 匹配原型 font-bold
      font-size: 20px !important;              // 匹配原型 text-xl
      transition: all 0.3s ease;
      
      &:hover {
        color: #333333 !important;                   // 匹配原型 primary-hover
      }

      .sidebar-logo-icon {
        font-size: 20px;
        margin-right: 8px;                     // 匹配原型 mr-2
        color: inherit;
      }

      .sidebar-title {
        color: inherit;
        font-weight: inherit;
        font-size: inherit;
        margin: 0;
        line-height: 1;
      }
    }
    
    // 收起状态样式
    &.collapse {
      .sidebar-logo-link {
        .sidebar-logo-icon {
          margin-right: 0;
          font-size: 24px;
        }
      }
    }
  }
  
  // Logo动画效果
  .sidebarLogoFade-enter-active,
  .sidebarLogoFade-leave-active {
    transition: opacity 0.3s ease;
  }
  
  .sidebarLogoFade-enter-from,
  .sidebarLogoFade-leave-to {
    opacity: 0;
  }

  // 滚动条样式 - 浅色主题
  .el-scrollbar__wrap {
    &::-webkit-scrollbar {
      width: 6px;
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #cbd5e0;
      border-radius: 3px;

      &:hover {
        background-color: #a0aec0;
      }
    }
  }
}

// ------------------------------
// Cards
// ------------------------------

.card {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  transition: box-shadow var(--duration-base) var(--easing-standard),
              transform var(--duration-base) var(--easing-standard);
}

.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.card-grid {
  display: grid; gap: var(--gap-md);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

// ------------------------------
// Buttons (generic helpers on top of Element Plus)
// ------------------------------

.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  transition: all var(--duration-base) var(--easing-standard);

  &:hover { background: var(--color-primary-weak); color: var(--color-primary); border-color: var(--color-primary); }
}

// ------------------------------
// Forms
// ------------------------------

.el-input__wrapper,
.el-select .el-input__wrapper {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #f8fafc;
  transition: all var(--duration-fast) var(--easing-standard);
  min-width: 120px;
}

.el-input__wrapper.is-focus,
.el-select .el-input__wrapper.is-focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(94,123,226,.18);
}

// Make selects a bit wider by default without impacting regular inputs
// Element Plus Select uses `.el-select__wrapper` (not `.el-input__wrapper`)
.el-select .el-select__wrapper,
.el-select .el-input__wrapper {
  min-width: 120px;
}

// ------------------------------
// Tables
// ------------------------------

.el-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.el-table__header th {
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-light);
}

.el-table__body tr:hover > td { background: var(--color-primary-weak); }

// ------------------------------
// Tags
// ------------------------------

.el-tag { border-radius: var(--radius-full); font-size: var(--font-sm); padding: 2px 8px; }

// ------------------------------
// Scrollbars
// ------------------------------

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

// ------------------------------
// Utility helpers (a few common ones; extended set lives in utils.scss)
// ------------------------------

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-hover { box-shadow: var(--shadow-hover) !important; }

.radius-sm { border-radius: var(--radius-sm) !important; }
.radius-md { border-radius: var(--radius-md) !important; }
.radius-lg { border-radius: var(--radius-lg) !important; }
.radius-xl { border-radius: var(--radius-xl) !important; }
.radius-full { border-radius: var(--radius-full) !important; }

.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-primary { color: var(--text-primary) !important; }

.bg-panel { background: var(--bg-panel) !important; }
.bg-hover { background: var(--bg-hover) !important; }
.bg-subtle { background: var(--bg-subtle) !important; }

// removed @use here; variables are already imported at the top

// 重置样式/组件覆盖/工具类已在文件顶部 use 进来

// 全局样式
html {
  height: 100%;
  font-size: 14px;
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

// 布局样式
.app-container {
  padding: $spacing-lg;
  background: var(--el-bg-color-page);
  min-height: calc(100vh - #{$header-height} - #{$breadcrumb-height});
}

.page-container {
  background: var(--el-bg-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: $spacing-xl;
  margin-bottom: $spacing-lg;
}

// 表格样式
.table-container {
  .el-table {
    .el-table__header-wrapper {
      th {
        background: var(--el-fill-color-light);
        color: var(--el-text-color-primary);
        font-weight: $font-weight-medium;
        vertical-align: middle;
      }
    }

    .el-table__row {
      &:hover {
        background: var(--el-fill-color-light);
      }
    }
  }

  .table-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: $spacing-lg;
    padding-bottom: $spacing-md;
    border-bottom: 1px solid var(--el-border-color-lighter);

    .table-title {
      font-size: $font-size-lg;
      font-weight: $font-weight-medium;
      color: var(--el-text-color-primary);
    }

    .table-actions {
      display: flex;
      gap: $spacing-sm;
    }
  }

  .table-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: $spacing-lg;
    padding-top: $spacing-md;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}

// 表单样式
.form-container {
  .form-header {
    margin-bottom: $spacing-xl;
    padding-bottom: $spacing-md;
    border-bottom: 1px solid var(--el-border-color-lighter);

    .form-title {
      font-size: $font-size-lg;
      font-weight: $font-weight-medium;
      color: var(--el-text-color-primary);
      margin-bottom: $spacing-xs;
    }

    .form-description {
      font-size: $font-size-sm;
      color: var(--el-text-color-secondary);
    }
  }

  .form-actions {
    display: flex;
    justify-content: center;
    gap: $spacing-md;
    margin-top: $spacing-xl;
    padding-top: $spacing-lg;
    border-top: 1px solid var(--el-border-color-lighter);
  }
}

// 卡片样式
.card-container {
  background: var(--el-bg-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: $spacing-xl;
  margin-bottom: $spacing-lg;
  transition: $transition-base;

  &:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-lg;
    padding-bottom: $spacing-md;
    border-bottom: 1px solid var(--el-border-color-lighter);

    .card-title {
      font-size: $font-size-md;
      font-weight: $font-weight-medium;
      color: var(--el-text-color-primary);
    }

    .card-actions {
      display: flex;
      gap: $spacing-sm;
    }
  }
}

// 状态样式
.status {
  display: inline-flex;
  align-items: center;
  gap: $spacing-xs;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-base;

  &.status-success {
    color: var(--el-color-success);
    background: var(--el-color-success-light-9);
  }

  &.status-warning {
    color: var(--el-color-warning);
    background: var(--el-color-warning-light-9);
  }

  &.status-danger {
    color: var(--el-color-danger);
    background: var(--el-color-danger-light-9);
  }

  &.status-info {
    color: var(--el-color-info);
    background: var(--el-color-info-light-9);
  }
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  color: var(--el-text-color-secondary);
}

// 空状态
.empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  color: var(--el-text-color-secondary);

  .empty-icon {
    font-size: 64px;
    margin-bottom: $spacing-md;
    color: var(--el-color-info-light-3);
  }

  .empty-text {
    font-size: $font-size-sm;
    margin-bottom: $spacing-lg;
  }
}

// ------------------------------
// ------------------------------
// 菜单导航样式 - 完全匹配原型设计
// ------------------------------

// 菜单导航容器样式
.menu-nav {
  padding: 16px;                                    // 匹配原型 p-4
  height: calc(100vh - 164px);                      // 减去logo高度和底部用户信息高度
  overflow-y: auto;
  
  // 菜单分组
  .menu-group {
    margin-bottom: 16px;
    
    .menu-group-title {
      font-size: 12px !important;                   // 匹配原型 text-xs
      color: var(--text-muted) !important;          // 匹配原型 text-text-muted
      text-transform: uppercase;                     // 匹配原型 uppercase
      font-weight: 600 !important;                  // 匹配原型 font-semibold
      letter-spacing: 0.5px;
      padding-left: 8px;                            // 匹配原型 pl-2
      margin-bottom: 8px;
      font-family: inherit;
    }
  }
  
  // 分隔线
  .menu-separator {
    height: 1px;
    background: var(--border);                      // 匹配原型 border-border
    margin: 24px 16px 16px 16px;                   // 匹配原型 my-6，但考虑容器padding
  }
  
  // 菜单样式重置
  .main-menu, .extension-menu {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;                          // 移除默认padding
    margin-bottom: 4px;                             // 匹配原型 space-y-1
    
    // 确保菜单项间距正确
    .el-menu-item,
    .el-sub-menu {
      margin-bottom: 4px;                           // 匹配原型 space-y-1
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  // 收起状态时的样式调整
  &.collapsed {
    padding: 8px;
    
    .main-menu, .extension-menu {
      .el-menu-item,
      .el-sub-menu > .el-sub-menu__title {
        margin: 4px 0;
        border-radius: 8px;
        justify-content: center;
      }
    }
  }
}

// 滚动条样式 - 匹配原型 scrollbar-hide
.scrollbar-wrapper {
  overflow-x: hidden;
  
  &::-webkit-scrollbar {
    display: none;                                  // 匹配原型 scrollbar-hide
  }
  
  -ms-overflow-style: none;
  scrollbar-width: none;
}

// Navbar layout (global)
// ------------------------------

.navbar {
  display: flex;
  align-items: center;
  height: 50px;
  padding-right: 16px; /* no left padding */
}

.navbar .hamburger-container {
  display: inline-flex;
  align-items: center;
  height: 100%;
  margin-right: 8px;
  cursor: pointer;
  padding-left: 0;
}

.navbar .breadcrumb-container {
  flex: 1 1 auto; min-width: 0;
  padding-left: 8px;
}

.navbar .right-menu {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.navbar .right-menu-item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
}

.navbar .avatar-container .avatar-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.navbar .avatar-container .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
}

// 响应式样式
@media (max-width: 768px) {
  .app-container {
    padding: $spacing-md;
  }

  .page-container {
    padding: $spacing-md;
  }

  .table-header {
    flex-direction: column;
    align-items: stretch;
    gap: $spacing-md;
  }

  .form-actions {
    flex-direction: column;
  }
}

// 打印样式
@media print {
  .no-print {
    display: none !important;
  }

  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

// ==========================================
// Dashboard 仪表板页面样式 - 完全匹配原型设计
// ==========================================

// 原型工具类 - 完全匹配Tailwind CSS样式
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.space-x-2 > * + * { margin-left: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.ml-2 { margin-left: 8px; }
.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.w-8 { width: 32px; }
.h-8 { height: 32px; }
.w-10 { width: 40px; }
.h-10 { height: 40px; }
.h-64 { height: 256px; }
.w-full { width: 100%; }
.rounded-full { border-radius: 50%; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 12px; }
.text-sm { font-size: 14px; }
.text-2xl { font-size: 24px; line-height: 1.2; }
.text-3xl { font-size: 48px; line-height: 1; }
.text-xs { font-size: 12px; }
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.p-6 { padding: 24px; }
.text-left { text-align: left; }
.border-b { border-bottom: 1px solid var(--border); }
.border-border { border-color: var(--border); }
.overflow-x-auto { overflow-x: auto; }
.inline-flex { display: inline-flex; }

// 颜色类 - 完全匹配原型
.bg-white { background-color: var(--bg-panel); }
.bg-primary-weak { background-color: var(--primary-weak); }
.bg-info-10 { background-color: rgba(59, 130, 246, 0.1); }
.bg-success-10 { background-color: rgba(34, 197, 94, 0.1); }
.bg-warning-10 { background-color: rgba(245, 158, 11, 0.1); }
.bg-danger-10 { background-color: rgba(239, 68, 68, 0.1); }
.bg-bg-hover { background-color: var(--bg-hover); }
.text-text-primary { color: var(--text-primary) !important; }
.text-text-secondary { color: var(--text-secondary) !important; }
.text-text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-info { color: var(--color-info) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }

// Hover效果
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:text-primary-hover:hover { color: var(--primary-hover) !important; }

// 页面标题 - 匹配原型设计
.page-header {
  margin-bottom: 24px;                             // 匹配原型 mb-6
  
  h1 {
    font-size: 24px !important;                    // 匹配原型 text-2xl (24px)
    font-weight: 700 !important;                   // 匹配原型 font-bold
    color: var(--text-primary) !important;         // 匹配原型 text-text-primary
    margin: 0;                                      // 匹配原型
    line-height: 1.2;
  }
  
  .page-description {
    font-size: 14px;                               // 匹配原型默认文字大小
    color: var(--text-muted) !important;           // 匹配原型 text-text-muted
    margin: 8px 0 0 0;                              // 匹配原型 mt-2
    line-height: 1.5;
  }
}

// 统计卡片样式 - 完全匹配原型
.stat-card {
  background: var(--bg-panel);                     // bg-white
  border-radius: 12px;                             // rounded-lg
  box-shadow: var(--shadow-card);                  // shadow-card
  padding: 24px;                                   // p-6
  transition: all 0.3s ease;                       // 悬浮效果
  
  &:hover {
    transform: translateY(-2px);                   // 悬浮上移
    box-shadow: var(--shadow-hover);               // 悬浮阴影
  }
}

// 图表卡片样式 - 完全匹配原型
.chart-card {
  background: var(--bg-panel);                     // bg-white
  border-radius: 12px;                             // rounded-lg
  box-shadow: var(--shadow-card);                  // shadow-card
  padding: 24px;                                   // p-6
}

// 活动区域样式 - 完全匹配原型
.activity-section {
  background: var(--bg-panel);                     // bg-white
  border-radius: 12px;                             // rounded-lg
  box-shadow: var(--shadow-card);                  // shadow-card
  padding: 24px;                                   // p-6
}

// 表格行悬浮效果 - 完全匹配原型
.table-row:hover {
  background-color: var(--bg-hover);               // 悬浮背景色
}

// 淡入动画 - 匹配原型
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

// shadow-card变量定义
:root {
  --shadow-card: 0 8px 16px rgba(15, 23, 42, .06);
  --shadow-hover: 0 12px 24px rgba(15, 23, 42, .12);
}

// 页面背景色 - 完全匹配原型
body, .app-container {
  background-color: var(--bg-page) !important;    // 匹配原型 #f5f5f5
}

// 图表组件样式
.login-trend-chart,
.permission-dist-chart {
  width: 100%;
  height: 256px;                                   // 匹配原型 h-64
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  
  .empty-icon {
    margin-bottom: 12px;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: 14px;
    margin: 0;
  }
}

// 快捷操作与系统信息区域统一高度
.chart-card {
  min-height: 450px;                                   // 统一最小高度
  display: flex;
  flex-direction: column;
  
  > div:last-child {                                   // 内容区域自动填充剩余空间
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

// 快捷操作网格样式
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  flex: 1;                                             // 填充剩余空间
  align-content: start;                                // 内容从顶部开始排列
  
  .action-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 80px;                                  // 确保卡片有最小高度
    
    &:hover {
      background: var(--bg-hover);
      border-color: var(--color-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
    }
    
    .card-icon {
      margin-right: 16px;
      color: var(--color-primary);
      
      .el-icon {
        font-size: 32px;
      }
    }
    
    .card-content {
      flex: 1;
      
      .card-title {
        margin: 0 0 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
      }
      
      .card-desc {
        margin: 0;
        font-size: 14px;
        color: var(--text-secondary);
      }
    }
    
    .card-arrow {
      color: var(--text-muted);
      transition: color 0.3s ease;
      
      .el-icon {
        font-size: 16px;
      }
    }
    
    &:hover .card-arrow {
      color: var(--color-primary);
    }
  }
}

// 图表按钮统一样式
.chart-card button,
.flex.space-x-2 button {
  border: none !important;                           // 移除黑边
  outline: none !important;                          // 移除焦点边框
  box-shadow: none !important;                       // 移除阴影
  background: transparent !important;                // 默认透明背景
  transition: all 0.2s ease !important;              // 平滑过渡
  
  &:focus,
  &:active {
    border: none !important;                         // 确保焦点和激活状态也无边框
    outline: none !important;
    box-shadow: none !important;
  }
}

// 时间筛选按钮特殊样式
.flex.space-x-2 {
  button {
    background: var(--bg-hover) !important;          // 默认背景
    color: var(--text-secondary) !important;         // 默认文字颜色
    font-weight: 500 !important;                     // 中等字重
    
    &:hover {
      background: var(--primary-weak) !important;    // 悬浮背景
      color: var(--color-primary) !important;        // 悬浮文字颜色
      transform: none !important;                    // 不需要变形效果
    }
    
    &.bg-primary-weak {
      background: var(--primary-weak) !important;    // 激活状态背景
      color: var(--color-primary) !important;        // 激活状态文字颜色
    }
    
    &.bg-bg-hover {
      background: var(--bg-hover) !important;        // 非激活状态背景
      color: var(--text-secondary) !important;       // 非激活状态文字颜色
    }
  }
}

// 图表刷新按钮样式
.chart-card .text-text-muted {
  color: var(--text-muted) !important;               // 默认静音色
  padding: 8px !important;                           // 增加点击区域
  border-radius: 4px !important;                     // 圆角
  
  &:hover {
    color: var(--color-primary) !important;          // 悬浮时主色调
    background: var(--primary-weak) !important;      // 悬浮背景
  }
  
  i {
    font-size: 14px !important;                      // 图标大小
  }
}

// ==========================================
// 统一表格样式 - 完全匹配原型设计
// ==========================================

// 表格容器
.system-table {
  .el-table {
    border: none !important;
    border-radius: 0 !important;                     // 移除表格圆角，匹配原型方形设计
    
    // 表格头部样式 - 完全匹配原型
    .el-table__header-wrapper {
      border-radius: 0 !important;                  // 移除表头圆角
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      
      th {
        background: var(--bg-hover) !important;      // rgb(238, 238, 238) 匹配原型
        color: var(--text-secondary) !important;     // text-text-secondary
        font-size: 14px !important;                  // text-sm
        font-weight: 600 !important;                 // font-semibold
        // text-align: left !important;              // 移除强制左对齐，让Element Plus的align属性生效
        padding: 12px 16px !important;               // py-3 px-4 (匹配原型 py-3 px-4)
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;                 // 移除每个th的圆角
        
        &:first-child {
          border-top-left-radius: 0 !important;      // 确保第一个th没有左上圆角
        }
        
        &:last-child {
          border-top-right-radius: 0 !important;     // 确保最后一个th没有右上圆角
        }
        
        .cell {
          padding: 0 !important;                     // 移除内边距
          // 移除所有text-align设置，让Element Plus原生align属性生效
        }
      }
      
      // 确保表头背景色覆盖整个头部
      thead tr {
        background: var(--bg-hover) !important;
      }
    }
    
    // 表格行样式 - 匹配原型
    .el-table__body-wrapper {
      border-radius: 0 !important;                   // 移除表格体圆角
      
      .el-table__row {
        transition: background-color 0.2s ease !important;
        background: var(--bg-panel) !important;      // 白色背景，匹配原型
        
        &:hover {
          background: var(--bg-hover) !important;    // table-row hover effect
        }
        
        td {
          padding: 12px 16px !important;             // py-3 px-4 (减少行高)
          border-bottom: 1px solid var(--border) !important; // 确保分隔线显示
          border-left: none !important;
          border-right: none !important;
          border-top: none !important;
          // 不强制设置text-align，让Element Plus的align属性生效
          
          .cell {
            padding: 0 !important;
            // 移除所有text-align设置，让Element Plus原生align属性生效
          }
        }
        
        // 最后一行不需要底部边框
        &:last-child td {
          border-bottom: none !important;
        }
      }
    }
    
    // 选择列样式
    .el-table-column--selection .el-checkbox {
      .el-checkbox__input {
        .el-checkbox__inner {
          border-radius: 4px !important;             // rounded
          border-color: var(--border) !important;    // border-border
          
          &:hover {
            border-color: var(--color-primary) !important;
          }
        }
        
        &.is-checked .el-checkbox__inner {
          background: var(--color-primary) !important; // text-primary
          border-color: var(--color-primary) !important;
        }
      }
    }
  }
}

// 用户名列样式（带小头像）
.username-cell {
  display: flex;
  align-items: center;
  
  .user-avatar-small {
    width: 32px !important;                          // 小一点的头像
    height: 32px !important;                         
    border-radius: 50% !important;                   // rounded-full
    margin-right: 8px !important;                    // 较小的间距
    object-fit: cover;
    flex-shrink: 0;                                  // 防止头像被压缩
  }
  
  .username-text {
    font-weight: 500 !important;                     // font-medium
    color: var(--text-primary) !important;           // text-text-primary
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 保留原有的用户信息单元格样式（如果其他地方需要）
.user-info-cell {
  display: flex;
  align-items: center;
  
  .user-avatar {
    width: 40px !important;                          // w-10
    height: 40px !important;                         // h-10
    border-radius: 50% !important;                   // rounded-full
    margin-right: 12px !important;                   // mr-3
    object-fit: cover;
    flex-shrink: 0;                                  // 防止头像被压缩
  }
  
  .user-details {
    min-width: 0;                                    // 允许文字收缩
    flex: 1;
    
    .user-name {
      font-weight: 500 !important;                   // font-medium
      color: var(--text-primary) !important;         // text-text-primary
      margin-bottom: 2px;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-email {
      color: var(--text-muted) !important;           // text-text-muted
      font-size: 14px !important;                    // text-sm
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// 状态标签样式
.status-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 8px !important;                       // px-2 py-1
  border-radius: 999px !important;                   // rounded-full
  font-size: 12px !important;                        // text-xs
  font-weight: 500 !important;                       // font-medium
  
  // 启用状态
  &.status-enabled {
    background: rgba(34, 197, 94, 0.1) !important;   // bg-success/10
    color: var(--color-success) !important;          // text-success
  }
  
  // 禁用状态
  &.status-disabled {
    background: rgba(239, 68, 68, 0.1) !important;   // bg-danger/10
    color: var(--color-danger) !important;           // text-danger
  }
  
  // 其他状态
  &.status-pending {
    background: rgba(245, 158, 11, 0.1) !important;  // bg-warning/10
    color: var(--color-warning) !important;          // text-warning
  }
}

// 表格操作按钮样式 - 完全依赖Element Plus原生对齐
.table-actions {
  display: inline-flex !important;                  // 改为inline-flex，不占满整行
  align-items: center !important;
  gap: 2px !important;                              // 最小间距
  flex-wrap: nowrap !important;                     // 确保不换行
  white-space: nowrap !important;                   // 强制不换行
  
  .action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;                          // 更小的按钮
    height: 24px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    font-size: 12px !important;                      // 更小的图标
    flex-shrink: 0 !important;                       // 防止按钮被压缩
    
    &:hover {
      background: var(--primary-weak) !important;    // 悬浮时淡色背景
    }
    
    // 编辑按钮
    &.edit-btn {
      color: var(--color-primary) !important;        // text-primary
      
      &:hover {
        color: var(--primary-hover) !important;      // hover:text-primary-hover
      }
    }
    
    // 查看/分配角色按钮
    &.view-btn {
      color: var(--text-muted) !important;           // text-text-muted
      
      &:hover {
        color: var(--text-primary) !important;       // hover:text-text-primary
      }
    }
    
            // 信息/配置按钮
            &.info-btn {
              color: var(--color-info) !important;           // text-info
              
              &:hover {
                color: var(--info) !important;               // hover:text-info/80
                background: rgba(59, 130, 246, 0.1) !important; // 信息按钮悬浮蓝色背景
              }
            }
            
            // 删除按钮
            &.delete-btn {
              color: var(--color-danger) !important;         // text-danger
              
              &:hover {
                color: var(--danger) !important;             // hover:text-danger/80
                background: rgba(239, 68, 68, 0.1) !important; // 删除按钮悬浮红色背景
              }
            }
  }
}

// 表格淡入动画
@keyframes tableRowFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.table-row-animate {
  animation: tableRowFadeIn 0.3s ease-out forwards;
  
  // 为不同行添加延迟
  &:nth-child(1) { animation-delay: 0s; }
  &:nth-child(2) { animation-delay: 0.1s; }
  &:nth-child(3) { animation-delay: 0.2s; }
  &:nth-child(4) { animation-delay: 0.3s; }
  &:nth-child(5) { animation-delay: 0.4s; }
  &:nth-child(n+6) { animation-delay: 0.5s; }
}

// 角色标签容器
.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  
  .el-tag {
    margin: 0 !important;                            // 移除默认margin，使用gap控制
    font-size: 12px !important;                      // 小一点的文字
    padding: 2px 6px !important;                     // 紧凑一点的padding
  }
}

// SystemTable 组件需要的工具类
.bg-bg-hover {
  background-color: var(--bg-hover);
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-border {
  border-color: var(--border);
}

.text-text-secondary {
  color: var(--text-secondary);
}

.text-text-muted {
  color: var(--text-muted);
}

.font-medium {
  font-weight: 500;
}

.p-4 {
  padding: 1rem;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.hover\:text-primary:hover {
  color: var(--color-primary);
}

// 文本大小
.text-sm {
  font-size: 14px;
}

// 响应式 flexbox
@media (max-width: 767px) {
  .flex-col {
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row !important;
  }
  
  .md\:justify-between {
    justify-content: space-between !important;
  }
  
  .md\:items-center {
    align-items: center !important;
  }
  
  .md\:mb-0 {
    margin-bottom: 0 !important;
  }
}

// 边距
.mb-4 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

// 字体粗细
.font-bold {
  font-weight: 700;
}

// 文字对齐
.text-center {
  text-align: center;
}

// 布局工具类
.w-full {
  width: 100%;
}

.block {
  display: block;
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.pointer-events-none {
  pointer-events: none;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
}

.top-1\/2 {
  top: 50%;
}

.left-3 {
  left: 0.75rem;
}

.right-3 {
  right: 0.75rem;
}

.appearance-none {
  appearance: none;
}

.transition-colors {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.gap-2 {
  gap: 0.5rem;
}

.flex-wrap {
  flex-wrap: wrap;
}

// ==========================================
// 页面头部样式 - 匹配原型设计
// ==========================================

// 页面头部区域
.page-header-section {
  // 标题区域
  .page-title-area {
    h1 {
      font-size: 24px;                         // text-2xl
      font-weight: 700;                        // font-bold
      color: var(--text-primary);              // text-text-primary
      margin: 0;
      line-height: 1.25;
    }
    
    p {
      color: var(--text-muted);                // text-text-muted
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
      margin-top: 0.5rem;                      // mt-2
    }
  }
  
  // 操作按钮区域
  .page-actions-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
    @media (min-width: 768px) {
      align-items: flex-end;
    }
    
    // 主要操作按钮 - 完全匹配原型
    .primary-action-btn {
      background: var(--color-primary);        // bg-primary (黑色)
      color: white;                            // text-white
      border: none;
      outline: none;
      cursor: pointer;
      font-size: 14px;                        // text-sm
      font-weight: 500;                        // font-medium
      border-radius: 6px;                      // rounded-md
      box-shadow: var(--shadow-card);          // shadow-card
      transition: all 0.2s ease;               // transition-all
      display: flex;
      align-items: center;
      
      &:hover {
        background: var(--color-primary-hover); // hover:bg-primary-hover (#333333)
      }
      
      &:active {
        background: var(--color-primary-active); // active:bg-primary-active (#222222)
      }
      
      i {
        font-size: 14px;
      }
    }
    
    // 次要操作按钮组
    .secondary-actions-group {
      .secondary-action-btn {
        background: transparent;
        border: 1px solid var(--border);       // border border-border
        color: var(--text-secondary);          // text-text-secondary
        border-radius: 6px;                    // rounded-md
        font-size: 14px;                       // text-sm
        font-weight: 400;
        cursor: pointer;
        outline: none;
        transition: all 0.2s ease;             // transition-colors
        display: flex;
        align-items: center;
        white-space: nowrap;
        
        &:hover {
          background: var(--bg-hover);         // hover:bg-bg-hover
          color: var(--text-primary);          // hover:text-text-primary
        }
        
        i {
          font-size: 12px;
        }
      }
    }
  }
}

// ==========================================
// 查询表单样式 - 匹配原型设计
// ==========================================

// 查询表单容器
.search-form-card {
  box-shadow: var(--shadow-card);
  
  // 网格布局
  .grid {
    display: grid;
  }
  
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .gap-6 {
    gap: 1.5rem;
  }
  
  @media (min-width: 768px) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  
  // 标签样式
  label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-size: 14px;
    font-weight: 500;
  }
  
  // 输入框样式
  .search-input {
    transition: all 0.2s ease;
    
    &::placeholder {
      color: var(--text-muted);
    }
    
    &:focus {
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    }
  }
  
  // Element Plus 选择器样式覆盖 - 适配新版本DOM结构
  .search-select-wrapper {
    .el-select {
      width: 100%;
      
      // 主容器
      .el-select__wrapper {
        background: var(--bg-hover) !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        transition: all 0.2s ease !important;
        box-shadow: none !important;
        height: 40px !important;  // 固定高度匹配原型
        
        &:hover {
          border-color: var(--color-primary) !important;
        }
        
        &.is-focused {
          border-color: var(--color-primary) !important;
          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
        }
      }
      
      // 选择区域
      .el-select__selection {
        .el-select__placeholder {
          color: var(--text-muted) !important;
          font-size: 14px !important;
          
          span {
            color: var(--text-muted) !important;
          }
        }
        
        .el-select__selected-item {
          color: var(--text-primary) !important;
          font-size: 14px !important;
        }
      }
      
      // 下拉箭头
      .el-select__suffix {
        .el-select__caret {
          color: var(--text-muted) !important;
          font-size: 14px !important;
          
          svg {
            width: 14px !important;
            height: 14px !important;
          }
        }
      }
    }
  }
  
  // 搜索树形选择器样式 - 完全匹配原型输入框样式
  .search-tree-select-wrapper {
    .el-tree-select {
      width: 100%;
      height: 40px;  // 确保外层容器高度
      
      // 主容器 - 更精确的选择器
      .el-select__wrapper,
      .el-input__wrapper {
        background: var(--bg-hover) !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        padding: 0 12px !important;  // 移除上下padding确保高度准确
        font-size: 14px !important;
        transition: all 0.2s ease !important;
        box-shadow: none !important;
        height: 40px !important;  // 固定高度匹配其他输入框
        min-height: 40px !important;  // 确保最小高度
        max-height: 40px !important;  // 确保最大高度
        display: flex !important;
        align-items: center !important;
        
        &:hover {
          border-color: var(--color-primary) !important;
        }
        
        &.is-focused {
          border-color: var(--color-primary) !important;
          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
        }
      }
      
      // 内部输入区域
      .el-input {
        height: 40px !important;
        
        .el-input__inner {
          height: 38px !important;  // 内部输入框高度
          line-height: 38px !important;
          border: none !important;
          background: transparent !important;
          padding: 0 !important;
          color: var(--text-primary) !important;
          font-size: 14px !important;
        }
      }
      
      // 选择区域
      .el-select__selection {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        
        .el-select__placeholder {
          color: var(--text-muted) !important;
          font-size: 14px !important;
          line-height: 1 !important;
        }
        
        .el-select__selected-item {
          color: var(--text-primary) !important;
          font-size: 14px !important;
          line-height: 1 !important;
        }
      }
      
      // 下拉箭头
      .el-select__suffix {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        
        .el-select__caret {
          color: var(--text-muted) !important;
          font-size: 14px !important;
          
          svg {
            width: 14px !important;
            height: 14px !important;
          }
        }
      }
      
      // 清空按钮
      .el-input__clear {
        color: var(--text-muted) !important;
      }
      
      // 强制移除任何可能影响高度的样式
      * {
        box-sizing: border-box !important;
      }
      
      // 确保与普通输入框完全一致的高度
      &.el-tree-select {
        height: 40px !important;
        
        // 针对可能的不同DOM结构
        .el-tree-select__inner,
        .el-select__input,
        .el-input__wrapper,
        .el-select__wrapper {
          height: 40px !important;
          line-height: 40px !important;
        }
        
        // 如果内部有input元素
        input {
          height: 38px !important;
          line-height: 38px !important;
          padding: 0 !important;
          margin: 0 !important;
        }
      }
    }
  }
  
  // 全局覆盖确保树形选择器高度一致
  .search-form-card .search-tree-select-wrapper {
    height: 40px;
    
    .el-tree-select {
      height: 40px !important;
      
      // 覆盖任何Element Plus默认样式
      .el-select__wrapper,
      .el-input__wrapper,
      .el-select,
      .el-input {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
      }
      
      // 针对具体的输入元素
      .el-select__input {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        line-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        color: var(--text-primary) !important;
        
        &::placeholder {
          color: var(--text-muted) !important;
        }
      }
      
      // 如果有其他可能的input元素
      input[type="text"] {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        line-height: 40px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        color: var(--text-primary) !important;
        
        &::placeholder {
          color: var(--text-muted) !important;
        }
      }
    }
  }
  
  // 强制覆盖 - 确保树形选择器内部input高度
  .search-tree-select-wrapper .el-select__input.is-default {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    
    &::placeholder {
      color: var(--text-muted) !important;
    }
  }
  
  // 更强的全局覆盖
  .search-form-card .el-tree-select .el-select__input {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
  }
  
  // 终极强制覆盖 - 使用更高优先级的选择器
  .search-form-card .search-tree-select-wrapper .el-tree-select input.el-select__input {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 38px !important;  // 稍微小一点让文字垂直居中
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  
  // 针对实际DOM结构的精确修复
  .search-tree-select-wrapper {
    .el-select.search-tree-select {
      height: 40px !important;
      
      // 主要容器
      .el-select__wrapper.is-filterable {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
      }
      
      // 选择区域
      .el-select__selection {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
      }
      
      // 输入包装器
      .el-select__selected-item.el-select__input-wrapper {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
      }
      
      // 具体的输入框
      input.el-select__input.is-default {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        line-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        color: var(--text-primary) !important;
      }
      
      // 占位符
      .el-select__selected-item.el-select__placeholder {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        
        span {
          color: var(--text-muted) !important;
          font-size: 14px !important;
          line-height: 1 !important;
        }
      }
      
      // 后缀区域（下拉箭头）
      .el-select__suffix {
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        
        .el-select__caret {
          color: var(--text-muted) !important;
        }
      }
    }
  }
  
  // 最强覆盖 - 确保48px变回40px
  .search-form-card .search-tree-select-wrapper .el-select.search-tree-select,
  .search-form-card .search-tree-select-wrapper .el-select.search-tree-select *,
  .search-form-card .search-tree-select-wrapper .el-select__wrapper,
  .search-form-card .search-tree-select-wrapper .el-select__selection,
  .search-form-card .search-tree-select-wrapper .el-select__selected-item {
    box-sizing: border-box !important;
  }
  
  .search-form-card .search-tree-select-wrapper .el-select__wrapper {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
  }
  
  // 输入框样式 - 与下拉框保持一致
  .search-input {
    border: 1px solid var(--border);
    background: var(--bg-hover);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 14px;
    height: 40px;  // 与下拉框高度一致
    line-height: 1.5;
    transition: all 0.2s ease;
    
    &::placeholder {
      color: var(--text-muted);
    }
    
    &:hover {
      border-color: var(--color-primary);
    }
    
    &:focus {
      border-color: var(--color-primary);
      outline: none;
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    }
  }
}

// 操作按钮样式
.search-form-card {
  button {
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    padding: 8px 16px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    
    // 重置按钮
    &.border {
      border: 1px solid var(--border) !important;
      background: var(--bg-panel);
      color: var(--text-secondary);
      
      &:hover {
        background: var(--bg-hover);
      }
    }
    
    // 搜索按钮
    &.bg-primary {
      background: var(--color-primary);
      color: white;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      
      &:hover {
        background: var(--primary-hover);
      }
      
      &:active {
        background: var(--primary-active);
      }
    }
    
    // 高级搜索按钮 - 完全匹配原型
    &.text-primary {
      background: transparent;
      color: var(--color-primary);             // text-primary (黑色)
      padding: 0;
      font-size: 14px;                         // text-sm
      
      &:hover {
        color: var(--color-primary-hover);     // hover:text-primary-hover (#333333)
      }
      
      i {
        margin-right: 4px;                     // mr-1
      }
    }
  }
}
